<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>gun.sprite.Button3 01</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<script type="text/javascript" src="../mootools-1.2-core.js"></script>
	<script type="text/javascript" src="../gun.sprite.js"></script>
	<script type="text/javascript">
	window.addEvent('domready', function() {
		new gun.sprite.Button3('btn', {
			frameSize: [100,100],
			onOver: function() {
				log('over');
			},
			onClick: function(e) {
				log('click - ' + '[ ' + e.client.x + ' : ' + e.client.y + ' ]');
			},
			onOut: function() {
				log('out');
			}
		});
	});

	function log(msg) {
		new Element('li', {
			'text': msg
		}).inject($('console'), 'top');
	}

	</script>
	<style type="text/css">
	#btn {background: url('images/btn.gif'); cursor:pointer; }
	#console { width: 500px; height: 150px; overflow: scroll; margin: 10px; border:1px solid #ccc; }
	</style>
</head>
<body>
	<div id="btn"></div>
	<ul id="console"></ul>
</body>
</html>